<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿王者荣耀官方网站-顶部</title>
    <link rel="stylesheet" href="../style/reset.css" />
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/page/header.css" />
  </head>
  <body>
    <div class="page-header">
      <div class="container">
        <h1 class="logo" onmouseover="ip.classList.add('show')">
          <div class="logo-wrapper">
            <img src="../img/header/logo.png" alt="" />
          </div>
          <div class="more-wrapper">
            <img src="../img/header/btn-moreip.png" alt="" />
          </div>
          <a href="#">仿王者荣耀官方网站</a>
        </h1>
        <div class="menus-wrapper">
          <ul class="menus">
            <li class="menu">
              <a href="#" class="big-txt">首页</a>
              <p class="small-txt">HOME</p>
            </li>
            <li class="menu">
              <p class="big-txt">游戏资料</p>
              <p class="small-txt">DATA</p>
              <ul class="submenu">
                <li>
                  <a href="#">版本专区</a>
                </li>
                <li>
                  <a href="#">英雄资料</a>
                </li>
                <li>
                  <a href="#">爆料站</a>
                </li>
                <li>
                  <a href="#">游戏壁纸</a>
                </li>
                <li>
                  <a href="#">世界观战</a>
                </li>
              </ul>
            </li>
            <li class="menu">
              <p class="big-txt">内容中心</p>
              <p class="small-txt">CONTENTS</p>
              <ul class="submenu">
                <li>
                  <a href="#">攻略中心</a>
                </li>
                <li>
                  <a href="#">开放素材库</a>
                </li>
                <li class="new">
                  <a href="#">内容共创平台</a>
                </li>
              </ul>
            </li>
            <li class="menu">
              <p class="big-txt">赛事中心</p>
              <p class="small-txt">MATCH</p>
              <ul class="submenu">
                <li class="hot">
                  <a href="#">KPL</a>
                </li>
                <li>
                  <a href="#">K甲</a>
                </li>
                <li class="hot">
                  <a href="#">挑战者杯</a>
                </li>
                <li class="new">
                  <a href="#">赛事授权</a>
                </li>
                <li class="new">
                  <a href="#">授权合作赛</a>
                </li>
              </ul>
            </li>
            <li class="menu">
              <p class="big-txt">王者文化</p>
              <p class="small-txt">CULTURE</p>
              <ul class="submenu">
                <li class="new">
                  <a href="#">IP共创计划</a>
                </li>
                <li class="new">
                  <a href="#">龙翼王者卡</a>
                </li>
                <li>
                  <a href="#">共创基地</a>
                </li>
                <li>
                  <a href="#">王者荣耀天天向上</a>
                </li>
              </ul>
            </li>
            <li class="menu">
              <p class="big-txt">玩家支持</p>
              <p class="small-txt">PLAYER</p>
              <ul class="submenu">
                <li>
                  <a href="#">腾讯游戏防沉迷</a>
                </li>
                <li>
                  <a href="#">成长守护平台</a>
                </li>
                <li>
                  <a href="#">对局环境情报站</a>
                </li>
                <li>
                  <a href="#">客服专区</a>
                </li>
                <li class="new">
                  <a href="#">手语打法参考</a>
                </li>
              </ul>
            </li>
            <li class="menu">
              <p class="big-txt">IP新游</p>
              <p class="small-txt">NEW GAMES</p>
              <ul class="submenu">
                <li class="new">
                  <a href="#">王者荣耀世界</a>
                </li>
                <li class="new">
                  <a href="#">王者万向棋</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <a href="#" class="download">
          <img src="../img/header/btn-download.png" alt="" />
          <div class="txt">下载游戏</div>
        </a>
        <div class="login">
          <img src="../img/header/login.png" alt="" />
          <a href="#">欢迎登录</a>
        </div>
      </div>
      <div
        id="ip"
        class="ip-container"
        onmouseleave="ip.classList.remove('show')">
        <div class="ip-title">
          <img src="../img/header/ip-title.png" alt="" />
        </div>
        <a href="#"><img src="../img/header/ip-pvp.png" alt="" /></a
        ><a href="#"><img src="../img/header/ip-world.png" alt="" /></a
        ><a href="#"><img src="../img/header/ip-wxq.png" alt="" /></a>
      </div>
    </div>
  </body>
</html>
